<!-- 修改密码 -->
<template>
  <div>
       <Card :bordered="false" :dis-hover="true" class="my-card-body">
           <div class="revisePwd">
               <h1>修改密码</h1>
               <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="100">
                    <FormItem label="旧密码" prop="old_password">
                        <Input v-model="formValidate.old_password" placeholder="请输入旧密码" type="password"></Input>
                    </FormItem>
                    <FormItem label="新密码" prop="new_password">
                        <Input v-model="formValidate.new_password" placeholder="请输入新密码" type="password"></Input>
                    </FormItem>
                    <FormItem label="确认密码" prop="confirm_password">
                        <Input v-model="formValidate.confirm_password" placeholder="请确认密码" type="password"></Input>
                    </FormItem>
                    <FormItem>
                        <Button type="primary" @click="handleSubmit('formValidate')">确认</Button>
                        <Button @click="handleReset('formValidate')" class="reset">重置</Button>
                    </FormItem>
                </Form>
           </div>
       </Card>
  </div>
</template>

<script>
import { revisePassword } from "@/api/user";
import { base64Encoder } from "@/libs/base64Encoder";
export default {
  data () {
    const validatePassCheck = (rule, value, callback) => {
        if (value === '') {
            callback(new Error('请再次输入密码'));
        } else if (value !== this.formValidate.new_password) {
            callback(new Error('两次输入的密码不一致'));
        } else {
            callback();
        }
    };       
    return {
        formValidate: {
            old_password: '',
            new_password: '',
            confirm_password: '',
        },
        ruleValidate: {
            old_password: [
                { required: true, message: '原始密码不能为空', trigger: 'blur' }
            ],
            new_password: [
                { required: true, message: '新密码不能为空', trigger: 'blur' }
            ],
            confirm_password: [
                { required: true,validator:validatePassCheck, trigger: 'blur' }
            ],
           
        },
    };
  },
  methods: {
    handleSubmit (name) {
        this.$refs[name].validate((valid) => {
            if (valid) {
                let data={
                    newPassword: base64Encoder(this.formValidate.new_password),
                    oldPassword: base64Encoder(this.formValidate.old_password)
                }
                revisePassword(data).then(res=>{
                    if(res.data.code==200){
                         this.$Message.success(res.data.msg);
                         this.handleReset('formValidate')
                    }else{
                         this.$Message.warning(res.data.msg);
                    }
                })
            } 
        })
        
    },
    handleReset (name) {
        this.$refs[name].resetFields();
    }
  },
  computed: {},
  mounted(){},
  components: {},

}

</script>
<style lang='less'>
    .revisePwd{
            padding: 0 45% 0 25%;
        &>h1{
            font-size: 26px;
            text-align: center;
            font-weight: normal;
            padding: 30px 0;
        }
        .reset{
            margin-left: 10px;
        }
    }
</style>